<template>
  <div id="creativeStatus">
    <div class="title">
      <el-row :gutter="25"  type="flex"  justify="center" >
        <el-col :span="5">
          <div class="box" style="background-color: #00a2ff">
             <p>所有关联广告数</p>
            <p>{{creativeStatus.adTotal}}</p>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box" style="background-color: #34C758">
            <p>当前在线广告数</p>
            <p>{{creativeStatus.onlineCount}}</p>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box" style="background-color: #FF3A30">
            <p>当前违规广告数</p>
            <p>{{creativeStatus.offlineIllegalAdCount}}</p>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box" style="background-color: orange">
            <p>当前受限广告数</p>
            <p>{{creativeStatus.onlineLimitAdCount}}</p>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box" style="background-color: grey">
            <p>所有停止广告数</p>
            <p>{{creativeStatus.stopAdCount}}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="select-box">
      <el-row>
        <el-col span="8" style="min-width:150px">
          <div class="text" style="width: 30px">媒体:</div>
          <el-select v-model="form.platform" clearable
                     multiple
                     placeholder="请选择媒体"
                     size="mini" style="width: 60%"
                     ref="createPlatform" @change="searchForm">
            <el-option
              v-for="item in platformsList"
              :key="item.value"
              :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="8" style="min-width:150px">
          <div class="text" style="width: 60px">投放状态:</div>
          <el-select v-model="form.creativeStatus" clearable
                     multiple
                     placeholder="请选择投放状态"
                     size="mini" style="width: 60%"
                     ref="createPlatform" @change="searchForm">
            <el-option
              v-for="item in statusList"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="table-body">
      <el-table size="medium" :data="tableData"  border v-loading="loading" height="80%"
      >
        <el-table-column v-for="(column,columIndex) in columnData" :key="columIndex" :prop="column.prop"
                         :label="column.label" :width="column.width" :fixed="column.fixed"
                         :align="column.align || 'center'"
                         :sortable="column.sortable" :index="columIndex" show-overflow-tooltip>
          <template slot-scope="{row}"   >
<!--            <div style="display: flex; justify-content: center" :style="getStatusDictList(row.status).color"  v-if="column.prop=='status'">-->
<!--                {{-->
<!--                  getStatusDictList(row.status).item-->
<!--                }}-->
<!--            </div>-->
            <span >{{ row[column.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前投放状态" prop="status" :sortable="true" :sort-method ="sortStatus">
          <template slot-scope="{row}"   >
            <div style="display: flex; justify-content: center" :style="getStatusDictList(row.status).color">
              {{
                getStatusDictList(row.status).item
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import  {getCreativeStatusDetail}  from "@/api/offer/creative";
import {getSysDictList} from "@/api/system/dict";
export default {
  name: "creativeStatus",
  props: {
    currentCreative: {
      type: Object
    }
  },
  data() {
    return {
      columnData: [
        {
          text: true,
          prop: "platform",
          label: "媒体",
          width: "160px",
          align: "left",
          sortable: true, //开启排序
        },
        {
          text: true,
          prop: "accountId",
          editRow: undefined,
          label: "账户ID",
          width: "",
          align: "left",
        },
        {
          text: true,
          prop: "adId",
          editRow: undefined,
          label: "广告ID",
          width: "",
          align: "left",
        },
        // {
        //   text: true,
        //   prop: "status",
        //   label: "当前投放状态",
        //   width: "120px",
        //   align: "left",
        //   sortable: true, //开启排序
        // },
      ],
      platformsList: [],
      statusList :[
        {key :"1", value :"在线-正常"},
        {key :"2", value :"在线-受限"},
        {key :"3", value :"不在线-违规"},
        {key :"0", value :"不在线-停止"}
      ],
      loading: false,
      tableData: [],
      creativeStatus: {
        adTotal: 0,
        onlineCount: 0,
        onlineLimitAdCount: 0,
        offlineIllegalAdCount: 0,
        stopAdCount: 0
      },
      form:{
        platform : '',
        creativeStatus:''
      }
    }
  },
  created() {
    getSysDictList("platforms").then((map) => {
      this.platformsList = map['platforms']
    });
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    iHeaderCellStyle() {
      return {
        color: '#101010',
        backgroundColor: '#F2F2F2'
      }
    },
    getDetail() {
      let  creativeId = this.currentCreative.id;
      this.loading = true;
      getCreativeStatusDetail(creativeId, this.form.platform.join(','),this.form.creativeStatus.join(','), '')
        .then(res => {
          this.loading = false;
          this.tableData = res.data.data.records;
          this.creativeStatus.adTotal = res.data.data.adTotal;
          this.creativeStatus.onlineCount = res.data.data.onlineCount;
          this.creativeStatus.onlineLimitAdCount = res.data.data.onlineLimitAdCount;
          this.creativeStatus.offlineIllegalAdCount = res.data.data.offlineIllegalAdCount;
          this.creativeStatus.stopAdCount = res.data.data.stopAdCount;
        }).catch(ex => {
        this.loading = false;
      })
    },
    getStatusDictList( status) {
      let result = { item:'', color :"" };
       this.statusList.forEach((item,index)=>{
        if (item.key == status){
           result.item = item.value;
        }
      });
      switch (status) {
        case 0:
          // result.color= "color: #9a9a9f;"
          break
        case 1:
          result.color= "color: #34C758;"
          break
        case 2:
          result.color= "color: #FF9502;"
          break
        case 3:
          result.color= "color: #FF3A30;"
          break
      }
      return  result;
    },
    searchForm(){
      console.log(this.form)
      this.getDetail();
    },
    sortStatus(a,b){
      let indexA = 0;
      let  indexB = 0;
      this.statusList.forEach((item,index) =>{
        if (item.key==a.status){
          indexA = index;
        }
        if (item.key==b.status){
          indexB = index;
        }
      })
      if(indexA > indexB){
        return -1;
      }else {
        return 1;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#creativeStatus {
  width: 90%;
  height: 85%;
}

.title {
  padding: 10px;
  display: flex;
  justify-content: center;
}
.box {
  display: table-cell;
  width: 140px;
  height: 80px;
  border-radius: 5px;
  text-align: center;
  color: white;
  font-size: 14px;
  vertical-align: middle;
}

.table-body {
  padding: 10px;
  height: 600px;
}
.select-box{
  padding: 10px;
}
::v-deep .el-drawer__body {
  overflow: hidden;
}
</style>
